<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div+Css布局</title>
		<style>
			/**内部Css样式**/
		</style>
		<!-- 引入外部的css样式文件        -->
		<link rel="stylesheet" href="css/layout_base.css" />

	</head>

	<body>
		<form action="#" method="get">
			<!--主区域--->
			<div id="main">
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>用户名:</span>
					</div>
					<div class="column">
						<input type="text" id="userName" name="userName" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>密码:</span>
					</div>
					<div class="column">
						<input type="password" id="userPsw" name="userPsw" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>邮箱:</span>
					</div>
					<div class="column">
						<input type="email" id="userEmail" name="userEmail" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>性别:</span>
					</div>
					<div class="column">
						<!--单选框如果具有互斥性：要求改组单选框的控件的name属性保持一致； -->
						<input type="radio" id="userSex1" name="userSex" />女
						<input type="radio" id="userSex2" name="userSex" />男
						<input type="radio" id="userSex3" name="userSex" />性别不限
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>兴趣爱好:</span>
					</div>
					<div class="column">
						<!--要求：同一组的多选框的name属性要保持一致；-->
						<input type="checkbox" id="userHobby1" name="userHobby" />学习
						<input type="checkbox" id="userHobby2" name="userHobby" />王者荣耀
						<input type="checkbox" id="userHobby3" name="userHobby" />旅游
						<input type="checkbox" id="userHobby4" name="userHobby" />编程
						<input type="checkbox" id="userHobby5" name="userHobby" />游泳
						<input type="checkbox" id="userHobby6" name="userHobby" />爬山
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>专业:</span>
					</div>
					<div class="column">
						<select id="userMajor" name="userMajor" style="width: 80px;">
							<option></option>
							<option value="cs">计算机</option>
							<option value="jx">机械</option>
							<option value="fc">金融</option>
						</select>
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>照片:</span>
					</div>
					<div class="column">
						<input type="file" id="userImg" name="userImg" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine" style="height: 400px;">
					<!---列1--->
					<div class="column" style="padding-top: 70px;">
						<span>自我介绍:</span>
					</div>
					<div class="column">
						<textarea id="userInfo" name="userInfo" rows="10" cols="30"></textarea>
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
			<span><input type="submit" value="提交信息" onclick="return checkMe();" /></span>
					</div>
					<div class="column">
						<input type="reset" value="重置" />
					</div>
				</div>
			</div>			
			<!--主区域 结束--->
		</form>
	</body>

	<script type="text/javascript">
		// 定义个函数
		/*
		 * 该函数在提交按钮的点击事件（onclick）时进行触发；
		 * 如果该按钮是submit类型的按钮，点击时会将表单提交给服务器端进行处理（将form表单的数据发送给服务器）；
		 * 如果该按钮的onclick绑定了一个js函数，
		 * 如果该函数返回值为false，则浏览器会阻止表单的提交；当验证不通过时，通过返回false，不进行登录或注册操作；
		 * 如果该函数的返回值为true，则浏览器允许表单的提交；
		 * 
		 */
		function checkMe() {
			// 使用js获取dom对象
			// 验证信息
			var alertMsg = "";
			// 用户名验证
			// 获取用户名输入框的内容
			var domUserName = document.getElementById("userName"); // 控件对象
			var strUserName = domUserName.value; // 获取控件对象的值
			// 如果用户名的值为空，则进行提示
			if(!strUserName || strUserName ==""){
				// 验证不通过的提示信息
				alertMsg+="请输入用户名!\n"
			}
			
			// 验证密码
			var strUserPsw = document.getElementById("userPsw").value;
			if(!(strUserPsw && strUserPsw != "")){
				// 验证不通过的提示信息
				alertMsg+="请输入密码!\n"
			}
			
			// 验证性别
			// 获取性别控件对象数组
			var radioUserSexs = document.getElementsByName("userSex"); // 该变量是一个数组
			// 使用循环肯定法判定选择结果：
			// 是否进行选择的循环判定结果:默认没有进行选择
			var isSexChecked = false;
			// for循环遍历这个单选框的控件数组，如果有一个控件是选中状态，则表示性别选项进行选择，否则如果都没有选择，则提示错误信息
			for(var i=0;i<radioUserSexs.length;i++){
				// 如果有一个单选框选中了，则说明进行了选择				
				if(radioUserSexs[i].checked){
					// 进行选择，退出循环
					// 将循环判定的标识变量改为true
					isSexChecked = true;
					break;
				}
			}
			
			// 根据循环判定结果判断验证是否通过
			if(isSexChecked == false){
				// 验证没有通过
				// 验证不通过的提示信息
				alertMsg+="请选择性别!\n"
			}
			
			
			// 兴趣爱好验证
			// 获取性别控件对象数组
			var radioUserHobbys = document.getElementsByName("userHobby"); // 该变量是一个数组
			// 使用循环肯定法判定选择结果：多选的项数至少2项；最多4项
			// 是否进行选择的循环判定结果:默认没有进行选择
			var hobbyCount = 0;
			// for循环遍历这个单选框的控件数组，如果有一个控件是选中状态，则表示性别选项进行选择，否则如果都没有选择，则提示错误信息
			for(var i=0;i<radioUserHobbys.length;i++){
				// 如果有一个单选框选中了，则说明进行了选择				
				if(radioUserHobbys[i].checked){
					// 进行选择，退出循环
					// 记录选中项的个数					
					hobbyCount++;
				}
			}
			// 根据循环判定结果判断验证是否通过
			if(hobbyCount<2 || hobbyCount > 4){
				// 验证没有通过
				// 验证不通过的提示信息
				alertMsg+="兴趣爱好至少选择两项，最多不超过四项!\n"
			}
			
			// 验证专业
			var selectMajor = document.getElementById("userMajor");
			// 等价于java的 System.out.print()方法
			console.info("selected:"+selectMajor.selected);			
			console.info("selectedIndex:"+selectMajor.selectedIndex);
			// 验证是否选择了专业
			if(selectMajor.selectedIndex == 0){
				// 验证不通过
				// 验证不通过的提示信息
				alertMsg+="兴请选择专业!\n"
			}
			
			// 使用消息框将该值弹出
			// 通过提示消息是否为空，判定验证是否通过
			if(alertMsg == ""){
				// 验证通过，返回true，允许表单提交
				return true;
			}else{
				// 验证不通过，提示错误信息
				alert(alertMsg);
				// 返回false，阻止表单提交
				return false;
			}
			
		}

		
	</script>

</html>